<template>
  <div class="user-profile">
    <van-nav-bar 
      class="profile-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 上传文件表单 -->
    <input 
      type="file" 
      hidden 
      accept="image/*"
      ref="file"
      @change="onFileChange"
    > 
    <van-cell title="头像" is-link center @click="$refs.file.click()">
      <van-image
        width="30"
        height="30"
        fit="cover"
        round
        :src="user.photo"
      />
    </van-cell>
    <van-cell 
      title="昵称"  
      is-link 
      :value="user.name"
      @click="NameShow"
    />
    <van-cell 
      title="性别"  
      is-link 
      :value="user.gender === 0 ? '男' : '女'"
      @click="isEditGenderShow = true"
    />
    <van-cell 
      title="生日"  
      is-link 
      :value="user.birthday"
      @click="isEditBirthdayShow = true"
    />
            <!-- 修改昵称 -->
    <van-popup 
      v-model="isEditNameShow"
      position="bottom"
      :style="{height:'100%'}"
    >
     <update-name 
      v-if="isEditNameShow"
      @close="isEditNameShow = false"
      v-model="user.name"
     />
    </van-popup>
            <!-- 修改性别 -->
    <van-popup 
      v-model="isEditGenderShow"
      position="bottom"
      :style="{height:'40%'}"
    >
     <update-gender 
      v-model="user.gender"
      @close="isEditGenderShow = false"
     />
    </van-popup>
            <!-- 修改生日 -->
    <van-popup 
      v-model="isEditBirthdayShow"
      position="bottom"
      :style="{height:'40%'}"
    >
     <update-birthday
        v-if="isEditBirthdayShow"
        v-model="user.birthday"
        @close="isEditBirthdayShow = false"
     
     />
     
    </van-popup>
            <!-- 修改头像 -->
    <van-popup 
      class="update-photo-popup"
      v-model="isEditPhotoShow"
      position="bottom"
      :style="{height:'100%'}"
    >
        <update-avatar
          v-if="isEditPhotoShow"
          :file="previewImage"
          @close="isEditPhotoShow = false"
          @update-photo="user.photo = $event"
        />
    </van-popup>
  </div>
</template>

<script>
import {getUserProfile} from '@/api/user'
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdateAvatar from './components/update-avatar.vue'
import UpdateBirthday from './components/update-birthday.vue'

  export default {
    name:'UserProfile',
    created() {
      this.loadUserProfile()
    },
    components:{
      UpdateName,
      UpdateGender,
      UpdateAvatar,
      UpdateBirthday
    },
    data() {
      return {
        user:{}, //用户数据
        isEditNameShow:false,
        isEditGenderShow:false,
        isEditBirthdayShow:false,
        isEditPhotoShow:false,
        previewImage:null
      }
    },
    methods: {
      async loadUserProfile(){
        const {data} = await getUserProfile()
        this.user = data.data
      },
      NameShow(){
        this.isEditNameShow = true
      },
      onFileChange(){

        const file = this.$refs.file.files[0]
        console.log(file);
        this.previewImage = file
        this.isEditPhotoShow = true
        this.$refs.file.value = '' //解决相同文件不触发change事件
      }
    },
  }
</script>

<style lang="less" scoped>
.profile-nav-bar{
  background-color: skyblue;
}
.van-popup{
  background-color: #f5f7f9;
}

.update-photo-popup{
  background-color: #000;
}
</style>